Day 9 主題切換 & Storage 中，我們使用了 Storage ，這邊依舊是 Storage 的應用。嘗試弄個多國語系。

多國語系

先安裝必要的套件

npm install @ngx-translate/core
npm install @ngx-translate/http-loader

在 app.module 中 import 跟設置 DI 。

準備語系 json ，我們語系檔的位置放在 asset/i18n 底下。
中文

英文

API 修改，命名就是 json 檔中的設置，像是音樂，就是 MENU.MUSIC，他就會找到對應了。

接著你就可以在 main-menu 頁面看到，下面的畫面

接著我們會使用到 translate 這個 pipe 所以我們需要在 main-menu.module 中 import TranslateModule 。

之後 main-menu.page.html 中

接著在 app.component.ts 中設置預設的語系 tw (跟剛剛的 json 檔名相同)

結果

APP 設置跟初始化多國語系

setting.page.html 加入 ion-radio 元件，讓我們選擇語言，另外，我加入了國旗的圖檔在 asset/flag 資料夾下。

setting.page.ts

1. import
2. 宣告
3. 從 Storage 取得目前語系，ion-radio 初始化，藉由 currentLanguage 做雙向綁定。
4. radio 選擇事件 languageChange()，把選擇的語系存在 Storage 並且更新 APP 目前的語系。
   

在 app.component.ts 中，存 Storage 取得存起來的語系，然後設置。

最後結果

額外提醒

因為開發的過程中安裝了些模組，所以如果發現掛掉的話，重新 ionic serve 看看。